<template>
  <div class="bar-wapper">
    <img src="@/assets/img/panel/titleDestroyFileNum.png" width="460" alt="" />
    <div class="chart-box">
      <div class="box-item" v-for="(item, index) in state.data" :key="index">
        <div class="date">{{ item.date }}</div>
        <div class="content">
          <div class="underline" :style="{ width: item.destroyFileNum + '%' }"></div>
          <div class="underline-back"></div>
        </div>
        <div class="num">{{ item.destroyFileNum }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onUnmounted, watch, reactive } from 'vue';

const props = defineProps({
  data: {
    type: Array
  }
});
const state = reactive({
  data: []
});
watch(
  () => props.data,
  (newVal) => {
    newVal && createPieChart();
  }
);

function createPieChart() {
  const data = JSON.parse(JSON.stringify(props.data));
  state.data = data.sort((a: any, b: any) => new Date(a.date).getTime() - new Date(b.date).getTime());
}
</script>
<style lang="less" scoped>
.bar-wapper {
  width: 460px;
  height: 312px;
  display: flex;
  flex-direction: column;
  .chart-box {
    height: 100%;
    background: rgba(28, 53, 80, 0.49);
    padding: 0 17px;
    .box-item {
      display: flex;
      line-height: 45px;
      align-items: center;
      .date {
        white-space: nowrap;
        width: 70px;
        color: #fff;
        margin-right: 20px;
      }
      .num {
        color: rgba(255, 170, 58, 1);
        margin-left: 20px;
      }
      .content {
        width: 100%;
        position: relative;
        overflow-x: hidden;
      }
      .underline {
        position: relative;
        height: 20px;
        width: 0px;
        transition: width 0.3s ease;
        background: linear-gradient(270deg, #ffaa3a 0%, rgba(255, 170, 58, 0.16) 100%);
      }
      .underline-back {
        content: '';
        display: block;
        height: 20px;
        width: 100%;
        position: absolute;
        top: 0;
        background: rgba(212, 212, 212, 0.07);
      }
    }
  }
}
</style>
